<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>配置对象代替switch</title>
	</head>
	<body>
		<script>
			/**
			 * @desc
			 * 比如有一个需求：传入cash，check，draft，zfb，wx_pay，对应输出：现金，支票，汇票，支付宝，微信支付。
			 */

			//switch版本
			function getPayChanne(tag) {
				switch (tag) {
					case 'cash':
						return '现金'
					case 'check':
						return '支票'
					case 'draft':
						return '汇票'
					case 'zfb':
						return '支付宝'
					case 'wx_pay':
						return '微信支付'
					default:
						return '未知类型'
				}
			}
			const channe = getPayChanne('cash')
			console.log(channe)
			/**
			 * @desc 存在的问题
			 * @desc 但是这个的硬伤还是和上面一样，万一下次又要多加一个如：bank_trans对应输出银行转账呢，代码又要改。类似的问题，同样的解决方案，配置数据和业务逻辑分离。代码如下。
			 */
			// 配置对象代替switch(观察者模式)(封装通用版)
			/**
			 *
			 */
			let payChanneForChinese = {
				cash: '现金',
				check: '支票',
				draft: '汇票',
				zfb: '支付宝',
				wx_pay: '微信支付',
			}
			function getPayChanne(tag, chineseConfig) {
				return chineseConfig[tag]
			}
			getPayChanne('cash', payChanneForChinese)
		</script>
	</body>
</html>
